<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>小猪CMS Banner</title>
		<link rel="stylesheet" href="css/idangerous.swiper2.7.6.css"/>
		<link rel="stylesheet" href="css/animate.min.css"/>
		<link rel="stylesheet" href="css/style.css"/>
	</head>

	<body>
		<div class="swiper-container">
			<a class="arrow-left" href="#"></a>
			<a class="arrow-right" href="#"></a>
			<div class="swiper-wrapper">
				<div class="swiper-slide slide1">
					<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1596&extra=" class="inner" target="_blank">
						<img src="images/s0.png" class="ani img s0" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
						<img src="images/s1.png" class="ani img s1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
						<img src="images/s2.png" class="ani img s2" swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
						<img src="images/s3.png" class="ani img s3" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay=".2s">
						<img src="images/s4.png" class="ani img s4" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0s">
					</a>
				</div>
				<div class="swiper-slide slide2">
					<a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1596&extra=" class="inner" target="_blank">
						<img src="images/pigBanner_03.png" class="ani img zh-a-1" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
						<img src="images/pigBnnaer_1_03.png" class="ani img zh-a-2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
					</a>
				</div>
				<div class="swiper-slide slide3">
					<div class="inner">
						<img src="images/b-1.png" class="ani img b-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s" />
						<img src="images/b-2.png" class="ani img b-2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s" />
						<img src="images/b-3.png" class="ani img b-3" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s" />
						<img src="images/b-s.png" class="ani img b-s-1" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
						<img src="images/b-s.png" class="ani img b-s-2" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" />
						<img src="images/b-s.png" class="ani img b-s-3" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s" />
						<img src="images/b-s.png" class="ani img b-s-4" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.8s" />
						<img src="images/b-s.png" class="ani img b-s-5" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s" />
						<img src="images/b-s.png" class="ani img b-s-6" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay=".5s" />
						<img src="images/b-y-1.png" class="ani img b-y-1 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="4s" />
						<img src="images/b-y-2.png" class="ani img b-y-2 loop" swiper-animate-effect="moveLeft" swiper-animate-duration="15s" swiper-animate-delay="0s" />
						<img src="images/b-y-3.png" class="ani img b-y-3 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="0s" />

						<div class="targetBtn clearfix ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
							<a class="a1" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1596&extra=" target="_blank">了解更多</a>
							<a class="a2" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1596&extra=" style="" rel="media-gallery" target="_blank"><i></i>观看视频介绍</a>
						</div>

					</div>
				</div>
			</div>
			<div class="pagination"></div>
		</div>

		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/idangerous.swiper2.7.6.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				pagination: '.pagination',
				paginationClickable: true,
				autoplay: 10000,
				speed: 1,

				//autoplayDisableOnInteraction : false,

				onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
					swiperAnimateCache(swiper); //隐藏动画元素 
					swiperAnimate(swiper); //初始化完成开始动画
				},
				onSlideChangeEnd: function(swiper) {
					swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
				}
			})
			$('.arrow-left').on('click', function(e) {
				e.preventDefault()
				mySwiper.swipePrev()
			})
			$('.arrow-right').on('click', function(e) {
				e.preventDefault()
				mySwiper.swipeNext()
			})
		</script>
	</body>

</html>